import React from 'react';
import { Avatar, Upload, message } from 'antd';
import { 
  UserOutlined, 
  PhoneOutlined, 
  MailOutlined, 
  TeamOutlined, 
  CrownOutlined, 
  BankOutlined,
  CalendarOutlined,
  CameraOutlined
} from '@ant-design/icons';
import type { UploadProps } from 'antd';

interface UserData {
  id: number;
  username: string;
  nickname: string;
  email: string;
  mobile: string;
  avatar?: string;
  dept?: {
    name: string;
  };
  posts?: Array<{ name: string }>;
  roles?: Array<{ name: string }>;
  createTime: string;
}

interface UserInfoProps {
  userInfo: UserData;
  onUpdate: (updatedInfo: Partial<UserData>) => void;
}

const UserInfo: React.FC<UserInfoProps> = ({ userInfo, onUpdate }) => {
  const handleAvatarChange: UploadProps['onChange'] = (info) => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      // 这里应该是上传成功后的处理
      message.success('头像上传成功');
      // 模拟更新头像URL
      onUpdate({ avatar: 'https://via.placeholder.com/120' });
    } else if (info.file.status === 'error') {
      message.error('头像上传失败');
    }
  };

  const beforeUpload = (file: File) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片!');
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过 2MB!');
      return false;
    }
    return true;
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('zh-CN');
  };

  const uploadButton = (
    <div className="avatar-upload-overlay">
      <CameraOutlined style={{ fontSize: '20px', color: '#fff' }} />
    </div>
  );

  return (
    <div className="user-info-container">
      <div className="user-avatar-section">
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action="/api/upload" // 这里应该是实际的上传接口
          beforeUpload={beforeUpload}
          onChange={handleAvatarChange}
        >
          <div className="avatar-container">
            <Avatar
              size={120}
              src={userInfo.avatar}
              icon={<UserOutlined />}
              className="user-avatar"
            />
            {uploadButton}
          </div>
        </Upload>
      </div>

      <ul className="user-info-list">
        <li className="user-info-item">
          <span className="user-info-label">
            <UserOutlined />
            用户名
          </span>
          <span className="user-info-value">{userInfo.username}</span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <UserOutlined />
            昵称
          </span>
          <span className="user-info-value">{userInfo.nickname}</span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <PhoneOutlined />
            手机号
          </span>
          <span className="user-info-value">{userInfo.mobile}</span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <MailOutlined />
            邮箱
          </span>
          <span className="user-info-value">{userInfo.email}</span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <BankOutlined />
            部门
          </span>
          <span className="user-info-value">
            {userInfo.dept?.name || '暂无'}
          </span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <TeamOutlined />
            岗位
          </span>
          <span className="user-info-value">
            {userInfo.posts?.map(post => post.name).join(', ') || '暂无'}
          </span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <CrownOutlined />
            角色
          </span>
          <span className="user-info-value">
            {userInfo.roles?.map(role => role.name).join(', ') || '暂无'}
          </span>
        </li>
        <li className="user-info-item">
          <span className="user-info-label">
            <CalendarOutlined />
            创建时间
          </span>
          <span className="user-info-value">
            {formatDate(userInfo.createTime)}
          </span>
        </li>
      </ul>


    </div>
  );
};

export default UserInfo;